<template>
    <div>
        <el-tabs v-model="form.type_id" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in typeData" :key="index" :label="item.title" :name="item.title"></el-tab-pane>
        </el-tabs>
        <el-row :gutter="30" class="course-list">
            <el-col v-for="item in tableData" :key="item.id" :span="8">
                <el-card shadow="always" @click="router.push({ name: 'informationShow', params: { id: item.id } })">
                    <el-image style="width: 100%;height: 128px;" :src="item.cover" />
                    <div class="title line-clamp2"><el-text size="large" tag="b">{{item.title}}</el-text></div>
                    <el-text type="danger">¥{{ item.price }}</el-text>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import router from '../../router'
import http from '../../util/request'

const form = ref<any>({search:'',type_id:0,page:0,pageSize:12})
interface Item {
    id:number,
    title:string
    cover:string
    brief:string
    price:number
}

const tableData = ref<Item[]>([]);

interface type {
    id:number,
    title:string
}

const typeData = ref<type[]>([]);

const onGetData = () => {
    http.post('/user/information/pay',form.value).then((response:any)=>{
        tableData.value = response.data.data
    })
}

const onGetType = () => {
    http.post('/type',{model:'Information'}).then((response:any)=>{
        typeData.value = response.data.data
        onGetData()
    })
}

const handleClick = (data: any) => {
    form.value.type_id = typeData.value[data.index].id
    onGetData()
}

onMounted(()=>{
    onGetType()
})
</script>

<style scoped lang="scss">
.main {
    padding: 0px;
}
.tip {
    padding: 0px 15px;
}

.course-list {
    padding: 15px;
    .el-card {
        margin-bottom: 30px;
    }
}
</style>
